<template>
	<view class="border-bottom">
		<view class="task_row flexRow item_color" @tap="toggle">
			<view class="row_24 text-ellipsis">
				{{data.id}}
			</view>
			<view class="row_18 text-ellipsis" :class="{ task_defeat: data.status=='任务失败', task_success: data.status=='任务通过' }">
				{{data.status}}
			</view>
			<view class="row_18 text-ellipsis">
				{{data.task_get_time}}
			</view>
			<view class="row_18 text-ellipsis">
				{{data.task_integral}}
			</view>
			<view class="row_24 text-ellipsis">
				{{data.task_type}}
			</view>
		</view>
		<view class="audit_note" v-show="open">
			审核理由:{{data.task_audit_note || ''}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object
			}
		},
		data() {
			return {
				open: false
			};
		},
		methods:{
			toggle(){
				this.open = !this.open
			}
		}
	}
</script>

<style>
.task_row{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	font-size:28rpx;
	line-height: 28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	flex-wrap: nowrap;
	text-align: center;
	padding: 30rpx 0;
}
.border-bottom{
	border-bottom: 1rpx solid rgba(238,238,238,1);
}
.row_24{
	width: 24%;
}
.row_18{
	width: 18%;
}
.title_color{
	color:rgba(51,51,51,1);
}
.item_color{
	color:rgba(172,172,172,1);
}
.audit_note{
	font-size: 30rpx;
	padding-left: 10rpx;
	padding-bottom: 10rpx;
}
.task_success{
	color: #52C41A;
}
.task_defeat{
	color: #F5222D;
}
</style>
